import React, { Component } from 'react'
import { View, Picker } from '@tarojs/components'
import {getIndex, inOrgList } from '../../utils/constant'
import { AtInput, AtDivider, AtButton }  from 'taro-ui'
import moment from 'moment';
import { getCurrentInstance } from '@tarojs/taro'
import {addInorgInfo, updateInorgInfo} from "../../api/user";
import './index.scss'

class Page extends Component {
  constructor (props) {
    super(props);
    this.state = {
      encodeOid: '',
      OperationType: '',
      inOrgFloat: true,
      form: {}
    }
  }

  componentWillMount () { }

  componentDidMount () {
    let { oid, OperationType, data, encodeOid } = getCurrentInstance().router.params;
    let form = {empoid: oid};
    if (data){
      form = JSON.parse(decodeURIComponent(data));
      form.joinDay = moment(form.joinDay).format('YYYY-MM-DD');
    }
    this.setState({ encodeOid: encodeOid, form: form, OperationType: OperationType});
  }

  componentWillUnmount () { }

  handlePickerChange = (e, name, list) => {
    let value = list[e.detail.value].value;
    let { form } = this.state;
    let newData = {...form};
    newData[name] = value;
    this.setState({
      form: newData
    });
    return value
  };

  handleDatePickerChange = (e, name)=>{
    let { form } = this.state;
    let newData = {...form};
    newData[name] = e.detail.value;
    this.setState({
      form: newData
    });
    return e.detail.value;
  };

  handleInputChange = (value, name) => {
    const { form } = this.state;
    let newData = {...form};
    newData[name] = value;
    this.setState({
      form: newData
    });
    return value
  };

  handleBack = (value) => {
    let { form, encodeOid } = this.state
    Taro.redirectTo({ url: '/pages/portal/index?oid=' + encodeOid })
  }

  handleSubmit = () => {
    let { form, OperationType, encodeOid } = this.state;
    if (OperationType && OperationType ==='add'){
      addInorgInfo(form).then(res => {
        Taro.redirectTo({url: '/pages/portal/index?oid=' + encodeOid });
      });
    }else if (OperationType && OperationType ==='update'){
      updateInorgInfo(form).then(res => {
        Taro.redirectTo({url: '/pages/portal/index?oid=' + encodeOid });
      });
    }
  };

  render () {
    return (
      <View className='inOrg'>
        <AtDivider content='请填写政治面貌' fontColor='#50C77A'  />
        <View>
          <View className='inOrg__form'>
            <View className='inOrg__form-label'>政治面貌</View>
            <Picker className='inOrg__form-picker' mode='selector' range={inOrgList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'polity', inOrgList)}>
              {
                this.state.form.polity !== undefined
                  ? <View className='inOrg__form-picker-value'>{inOrgList[getIndex(inOrgList,this.state.form.polity)]?.label}</View>
                  : <View className='inOrg__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='inOrg__form'>
            <View className='inOrg__form-label'>加入时间</View>
            <Picker className='inOrg__form-picker' mode='date'
                    onChange={(e) => this.handleDatePickerChange(e, 'joinDay')}>
              {
                this.state.form.joinDay
                  ? <View className='inOrg__form-picker-value'>{this.state.form.joinDay}</View>
                  : <View className='inOrg__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='inOrg__form'>
            <AtInput
              name='value'
              title='组织所在单位'
              type='text'
              placeholder='请填写组织所在单位'
              value={this.state.form.inorgname}
              onChange={(e) => this.handleInputChange(e, 'inorgname')}
            />
          </View>
        </View>

        <View className='button_group'>
          <AtButton onClick={() => this.handleBack()}>返回</AtButton>
          <AtButton type='primary' onClick={() =>this.handleSubmit()}>保存</AtButton>
        </View>
      </View>
    )
  }
}

export default Page
